<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
            list-style: none;
        }

        .tab_hd {
            display: flex;
            width: 300px;
            margin: 50px auto;
        }

        .tab_hd li {
            width: 100px;
            text-align: center;
            line-height: 2;
            background-color: #eee;
        }

        .tab_hd .active {
            background-color: pink;
        }

        .tab_bd {
            width: 300px;
            height: 300px;
            margin: 50px auto;
        }

        .tab_bd li {
            width: 300px;
            height: 300px;
            background-color: #f00;
        }

        .tab_bd li {
            display: none;
        }

        .tab_bd .show {
            display: block;
        }

        .subTabTitle {
            display: flex;
        }

        .subTabTitle button {
            flex: 1;
        }

        .tab_bd .active {
            background-color: green;
            color: aliceblue;
        }

        .subTabBody span {
            display: block;
            line-height: 200px;
            text-align: center;
            display: none;
        }
    </style>
</head>

<body>
    <ul class="tab_hd">
        <li class="active">11</li>
        <li>22</li>
        <li>33</li>
    </ul>

    <ul class="tab_bd">
        <li class="show">
            <p class="subTabTitle">
                <button class="active">1101</button>
                <button>1102</button>
                <button>1103</button>
            </p>
            <p class="subTabBody">
                <span class="show">1101</span>
                <span>1102</span>
                <span>1103</span>
            </p>
        </li>
        <li>
            <p class="subTabTitle">
                <button class="active">2201</button>
                <button>2202</button>
                <button>2203</button>
            </p>
            <p class="subTabBody">
                <span class="show">2201</span>
                <span>2202</span>
                <span>2203</span>
            </p>
        </li>
        <li>
            <p class="subTabTitle">
                <button class="active">3301</button>
                <button>3302</button>
                <button>3303</button>
            </p>
            <p class="subTabBody">
                <span class="show">3301</span>
                <span>3302</span>
                <span>3303</span>
            </p>
        </li>
    </ul>



    <script>

        // 
        const oTab1Lis = document.querySelectorAll('.tab_hd li');
        const oTab2Lis = document.querySelectorAll('.tab_bd li');

        // 点击上面的Li   显示下面的li

        // 循环事件绑定
        for (let i = 0; i < oTab1Lis.length; i++) {
            oTab1Lis[i].onclick = function () {
                // alert(1)
                // 清除所有
                for (let j = 0; j < oTab1Lis.length; j++) {
                    oTab1Lis[j].classList.remove('active');
                    oTab2Lis[j].classList.remove('show');
                }

                // 给当前添加

                oTab1Lis[i].classList.add('active');
                oTab2Lis[i].classList.add('show');


                // 获取按钮绑定二级

                // 首先找到与当前点击的这个li所对应显示的li
                const oLi = this.parentElement.nextElementSibling.children[i];
                console.log(oLi);


                const oBtns = oLi.querySelectorAll('button');   // 3
                const oSpans = oLi.querySelectorAll('span');    // 3

                console.log(oBtns);

                // 绑定事件
                for (let k = 0; k < oBtns.length; k++) {
                    oBtns[k].onclick = function () {
                        // 清除所有
                        for (let j = 0; j < oBtns.length; j++) {
                            oBtns[j].classList.remove('active');
                            oSpans[j].classList.remove('show');
                        }
                        // 给当前添加
                        oBtns[k].classList.add('active');
                        oSpans[k].classList.add('show');
                    }
                }
            }
        }







    </script>





</body>

</html>